<script setup lang="ts">
	import { computed, ref, unref } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import { route } from '@/uni_modules/uview-plus'
	import { stockList } from '@/package_salesman_check/api/home'


	const useTabs = () => {
		const currentIndex = ref(0)
		const tabsColumns = computed(() => {
			return [
				{
					name: '盘点任务',
					id: 1
				},
				{
					name: '完成记录',
					id: 2
				}
			]
		})

		const currentTabsItem = computed(() => {
			return unref(tabsColumns)[unref(currentIndex)]
		})

		return {
			currentIndex,
			tabsColumns,
			currentTabsItem
		}
	}
	const { tabsColumns, currentIndex, currentTabsItem } = useTabs()

	const paging = ref()
	const useCURD = () => {
		const dataList = ref([])

		const getList = async (page : number, limit : number) => {
			const params = { page, limit, check_status: unref(currentTabsItem).id }
			try {
				const res = await stockList(params)

				paging.value?.complete([...res.data.data])
			} catch (err) {
				paging.value?.complete(false)
			}
		}

		const searchAction = () => {
			paging.value?.reload()
		}

		return {
			dataList,
			getList,
			searchAction
		}
	}
	const { dataList, getList, searchAction } = useCURD()

	const toStoreDetail = (item) => {
		route({
			url: '/package_salesman_check/pages/Inventory/detail',
			params: {
				id: item.id,
				check_status: unref(currentTabsItem).id
			}
		})
	}
</script>

<template>
	<view class="content">
		<view class="user_info_wrap">
			<view class="user-info">
				<view class="avatar-wrap">
					<up-tabs v-model:current="currentIndex" @change="searchAction" :list="tabsColumns"
						:activeStyle="{ color: 'rgba(54, 116, 242, 1)' }"
						:itemStyle="{ height: '104rpx', fontSize: '28rpx' }" lineWidth="104rpx"
						lineColor=" rgba(54, 116, 242, 1)" :scrollable="false">
					</up-tabs>
				</view>
			</view>
		</view>
		<view class="main">
			<z-paging ref="paging" v-model="dataList" @query="getList" :fixed="false" height="calc(100vh - 109rpx)">
				<view class="main-box" v-for="(item,index) in dataList" :key="index" @click="toStoreDetail(item)">
					<view class="circular"></view>
					<view class="circular1"></view>
					<view class="main-header">
						<view class="header-name">{{item.no}}</view>
						<!-- <view class="header-text">待初盘</view> -->
					</view>
					<view class="main-line"></view>
					<view class="main-jl">创建时间：<text style="color: rgba(2, 14, 36, 1);">{{item.create_time}}</text>
					</view>
					<view class="main-jl">盘点类型：<text style="color: rgba(2, 14, 36, 1);">{{item.check_type_text}}</text>
					</view>
					<!-- <view class="main-jl">盘点状态：<text style="color: rgba(2, 14, 36, 1);">{{item.check_time}}</text>
					</view> -->
					<view class="line"></view>
					<view class="foot-box" v-if="item.check_status == 1">
						<view class="box-name">{{item.check_status_text}}</view>
						<view class="box-name">{{item.rate}}</view>
					</view>
					<view class="foot-box" v-else>
						<view class="box-name1">{{item.check_status_text}}</view>
						<view class="box-name1">{{item.rate}}</view>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		background: rgba(242, 243, 245, 1);
	}

	.user_info_wrap {
		@include flex();
		flex-direction: column;
		justify-content: flex-end;
		gap: 20rpx;
		width: 100%;
		height: 109rpx;
		background-color: #FFFFFF;
		padding: 0 40rpx 0rpx;
		box-sizing: border-box;
	}

	.main {
		width: 100%;
		height: calc(100vh - 369rpx);
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);

		/* 兼容iOS 11.2及以上 */
		.main-box {
			width: 702rpx;
			height: 402rpx;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			padding: 30rpx;
			box-sizing: border-box;
			margin: 20rpx auto;
			box-shadow: 8rpx 4rpx 22rpx rgba(55, 131, 252, 0.05);
			position: relative;

			.circular {
				position: absolute;
				bottom: 100rpx;
				left: -15rpx;
				width: 28rpx;
				height: 28rpx;
				border-radius: 50%;
				background: rgba(242, 243, 245, 1);
			}

			.circular1 {
				position: absolute;
				bottom: 100rpx;
				right: -15rpx;
				width: 28rpx;
				height: 28rpx;
				border-radius: 50%;
				background: rgba(242, 243, 245, 1);
			}

			.main-header {
				display: flex;
				justify-content: space-between;

				.header-name {
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(2, 14, 36, 1);
				}

				.header-text {
					width: 104rpx;
					height: 42rpx;
					border-radius: 6rpx;
					background: rgba(15, 127, 255, 0.1);
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(15, 127, 255, 1);
					text-align: center;
					line-height: 42rpx;
				}
			}

			.main-line {
				width: 654rpx;
				height: 0rpx;
				border: 2rpx solid rgba(0, 0, 0, 0.1);
				margin: 30rpx auto;
			}

			.main-jl {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(100, 101, 102, 1);
				margin-bottom: 20rpx;
			}

			.line {
				position: absolute;
				bottom: 120rpx;
				width: 638rpx;
				height: 0rpx;
				border: 2rpx dashed rgba(0, 0, 0, 0.05);
			}

			.foot-box {
				position: absolute;
				bottom: 10rpx;
				display: flex;
				justify-content: space-between;
				width: 654rpx;
				height: 88rpx;
				border-radius: 6rpx;
				padding: 30rpx;
				box-sizing: border-box;
				background: linear-gradient(180deg, rgba(242, 243, 245, 1) 0%, rgba(242, 243, 245, 0) 100%);

				.box-name {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(100, 101, 102, 1);
				}

				.box-name1 {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(15, 127, 255, 1);
				}
			}

		}
	}
</style>